<template>
	<div class="l-menu-set">
        <el-button-group class="l-menu-button">
            <el-button size="mini" type="primary" @click="createMenu()">新建菜单项</el-button>
            <el-button size="mini" type="danger" @click="batchDel()">删除菜单项</el-button>
        </el-button-group>

		  <el-table
		    :data="tableData"
		    style="width: 100%;margin-bottom: 20px;"
		    row-key="_id"
		    border
		    type="selection"
		    @toggleRowExpansion="handleExpanded"
		    @selection-change="handleSelectionChange"
		    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="rule_title" label="标题">
            </el-table-column>
            <el-table-column prop="rule_name" label="名称">
            </el-table-column>
            <el-table-column prop="icon" label="图标" width="170">
            </el-table-column>
            <el-table-column prop="parents" label="父级" width="210">
            </el-table-column>
            <el-table-column prop="rule_status" label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.rule_status" active-color="#409eff" inactive-color="#dfdfdf" :active-value="1" :inactive-value="2" @change="handlerState(scope.row)"/>
                </template>
            </el-table-column>
            <el-table-column prop="action" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button size="small" type="" @click="setUpdate(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="intDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
		  </el-table>
        <div @click="target">权限组</div>


        <!-- 新建权限设置模态框 -->
        <el-dialog :title="dialog.title" :visible.sync="dialogVisible" :close-on-click-modal="false" class="dislog-menu">
            <div>
                <el-row type="flex">
                    <el-col :span="6" class="j-rule-label">菜单标题：</el-col>
                    <el-col :span="18">
                        <el-input style="width:350px;" v-model="menu.rule_title" placeholder="请填入菜单标题" />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6" class="j-rule-label">菜单名称：</el-col>
                    <el-col :span="18">
                        <el-input style="width:350px;" v-model="menu.rule_name" placeholder="请填入菜单名称" />
                        <p class="j-rule-tips">*提示：名称只可用字母、数字组成。</p>
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col :span="6" class="j-rule-label">菜单图标：</el-col>
                    <el-col :span="18">
                        <el-input style="width:350px;" v-model="menu.icon" placeholder="请填入菜单图标" />
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col :span="6" class="j-rule-label">菜单父级：</el-col>
                    <el-col :span="18">
                        <el-select v-model="menu.parents" placeholder="请选择父级">
                        	<el-option  value="" label="顶级菜单"></el-option>
                            <el-option v-for="item in tableData" :key="item.name" :label="item.rule_title" :value="item._id" v-if="item.parents == ''">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col :span="6" class="j-rule-label">菜单状态：</el-col>
                    <el-col :span="18">
                        <el-radio-group v-model="menu.rule_status">
                            <el-radio :label="1">显示</el-radio>
                            <el-radio :label="2">隐藏</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" v-if="dialog.cancel" @click="dialogVisible = false">{{dialog.cancel}}</el-button>
                <el-button size="small" type="primary" @click="intAction()">{{dialog.determine}}</el-button>
            </div>
        </el-dialog>
	</div>
</template>
<script type="text/javascript">
	import { get_menu_count , get_menu_list , add_menu , edit_menu , del_menu } from '@/api/menu'
	export default {
		data (){
			return {
				menu:{
					rule_title:"",
					rule_name:"",
					parents:"",
					icon:"",
					rule_status:0,
				},
				tableData:[],

				// 多选数据
				selectionMenu:[],
				// 页面状态
				page_state:'add',
				// 模态框配置
				dialogVisible:false,
				dialog:{
					title:"添加菜单",
					cancel:"取消",
					determine:"确定"
				}
			}
		},
		mounted(){
			// 获取所有菜单
			this.getMenuAll();


		},
		methods:{

			handleExpanded(row,expanded){
				console.log('function',[row,expanded])
			},


			target(){
				this.$router.push({
					name:'set-permit',
					query:{
						id:1,
						name:'aaa'
					},
					params:{
						id:3,
						name:'bbbb',
					}
				})
			},


			// 新建菜单项
			createMenu(){
				this.dialog = {
					title:"添加菜单",
					cancel:"取消",
					determine:"确定",
				}
				this.menu = {
					rule_title:"",
					rule_name:"",
					parents:"",
					icon:"",
					rule_status:0,
				};
				this.dialogVisible = true;
				this.page_state = 'add';
			},
			// 批量删除菜单项
			batchDel(){
	            if (this.selectionMenu.length > 0) {
	              this.intDel(this.selectionMenu);
	            }else{
	              this.$message({
	                message: '请选择需要删除的菜单！',
	                type: 'warning'
	              });
	            }
			},
			// 直接表格中修改状态
			handlerState(data){
				edit_menu(data).then(response => {
		              this.$message({
		                message: '更新菜单成功！',
		                type: 'success'
		              });
		              this.getMenuAll();
				})
			},
			// 更新菜单项
			setUpdate(data){
				this.menu = JSON.parse(JSON.stringify(data))
				this.dialog = {
					title:"更新菜单项",
					cancel:"取消",
					determine:"更新",
				}
				this.dialogVisible = true;
				this.page_state = 'edit';

			},
			// 单个删除
			intDel(data){
	            this.rule = JSON.parse(JSON.stringify(data));
	            this.$confirm('此操作将永久删除该菜单, 不可恢复, 是否继续?', '系统提示', {
	                confirmButtonText: '继续',
	                cancelButtonText: '取消',
	                type: 'warning'
	            }).then(() => {
	                let _id = [];
	                if(data.length > 0){
	                  data.forEach(item => {
	                    _id.push(item._id);
	                  })
	                }else{
	                  _id.push(data._id);
	                }
	                this.delData({_id:_id});
	            }).catch(() => {
	                this.$message({
	                    type: 'info',
	                    message: '已取消删除'
	                });
	            });
			},
			// 功能处理
			intAction(){
				switch(this.page_state){
					case 'add':
						this.addMenu();
					break;
					case 'edit':
						this.editMenu();
					break;
				}

			},


			/**
			 * 多选数据
			 * @param  {[type]} data [description]
			 * @return {[type]}      [description]
			 */
			handleSelectionChange(data){
				this.selectionMenu = data;
			},
			/**
			 * 检测输入项
			 * @return {[type]} [description]
			 */
	        checkData(){
	          var name = /^[A-Za-z0-9]+$/;
	          var ret = false;
	          var tips= null;
	          if(!this.menu.rule_title){
	            tips = '请填入菜单标题！';
	            ret = true;
	          }else if(!this.menu.rule_name){
	            tips = '请填入菜单名称！';
	            ret = true;
	          }else if(!name.test(this.menu.rule_name)){
	              tips = '菜单名称不符合规则！';
	              ret = true;
	          }else if(!this.menu.rule_status){
	            tips = "请选择菜单状态"
	            ret = true
	          }

	          if(ret){
	            this.$message({
	                message: tips,
	                type: 'warning'
	              });
	            return false;
	          }
	          return true;
	        },

			/******************************   数据处理  ******************************/
			/**
			 * 获取所有菜单
			 * @return {[type]} [description]
			 */
			getMenuAll(){
				get_menu_list().then(response => {
					// console.log('sed',response);
					this.tableData = response;
				})
			},

			/**
			 * 添加菜单
			 */
			addMenu(){
				if(!this.checkData()){ return false }
				add_menu(this.menu).then(response => {
	              this.$message({
	                message: '添加菜单成功！',
	                type: 'success'
	              });
	              this.dialogVisible = false;
	              this.getMenuAll();
				})
			},

			/**
			 * 删除菜单
			 * @return {[type]} [description]
			 */
			delData(data){
				del_menu(data).then(response => {
					if(response){
		              this.$message({
		                message: '删除菜单成功！',
		                type: 'success'
		              });
		              this.dialogVisible = false;
		              this.getMenuAll();
					}else{
		              this.$message({
		                message: '此菜单中含有子菜单，不可删除！',
		                type: 'warning'
		              });
					}
				})
			},

			/**
			 * 编辑菜单
			 * @return {[type]} [description]
			 */
			editMenu(){
				edit_menu(this.menu).then(response => {
		              this.$message({
		                message: '更新菜单成功！',
		                type: 'success'
		              });
		              this.dialogVisible = false;
		              this.getMenuAll();
				})
			}




		}
	}
</script>
<style type="text/css" lang="scss">
.l-menu-button{
	margin-bottom: 10px;
}

.el-row--flex {
    align-items: center;
    margin-bottom: 15px;

    &:last-child {
        margin-bottom: 0px;
    }
}

.el-select-dropdown {
    .el-scrollbar:not(.el-menu--collapse) {
        min-height: 0px;
    }
}


.dislog-menu {
    .el-checkbox__label {
        margin-bottom: 15px;
    }

    .j-rule-label {
        text-align: right;
    }

    .j-rule-tips {
      color:red;
      font-size: 12px;
      padding: 0px;
      margin: 0px;
      margin-bottom: 15px;
    }
}
</style>